<template>
    <el-drawer title="详情" :model-value="modelValue" :size="680" @closed="handleClose">
        <XcTable id="xc-table" height="100%" :data="detail" :columns="tableColumns">
            <template #index="scope">{{ scope.$index + 1 }}</template>
            <template #skDate="scope">{{ scope.row.skDate ? scope.row.skDate : '--' }}</template>
            <template #action="{ row }"><el-button type="text" @click="downLoad(row)">下载</el-button></template>
        </XcTable>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, reactive, onMounted } from 'vue';
import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/XcTable.vue';
import { downLoadCommon } from '@/utils/common';

const emits = defineEmits<{ (e: 'update:modelValue', visible: boolean): void }>();
const tableColumns = [
    { label: '序号', key: 'index', render: true, prop: { width: 100 } },
    { label: '上刊日期', key: 'skDate', prop: { width: 150 } },
    { label: '文件类型', key: 'fileType', prop: { width: 150 } },
    { label: '类型', key: 'dataType', prop: { width: 100 } },
    { label: '操作', key: 'action', render: true, prop: { width: 120 } },
];
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    detail: {
        type: Array,
        default: () => {
            return [];
        },
    },
});
const downLoad = (row: any) => {
    downLoadCommon(row.fileUrl);
};
const handleClose = () => {
    emits('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.xc-table {
    height: 100%;
}
</style>
